<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			a:link{
				display:block;
				width: 93px;
				height: 29px;
				background-image:url("img/btn.png");
				
			}
			a:hover{
				background-position:93px 0;
				
			}
			a:active{
				background-position:186px 0;
				 	}
				/*解决图片闪烁的问题：
				     可以将多个小图片统一保存到一个图片中，然后通过调整background-position来显示的
				     这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题
				     这个技术在网页中应用的十分广泛，被称为CSS-Sprite，这种图我们也成为雪碧图
				     
				   雪碧图的使用步骤：
				      1.先确定要使用的图标
				      2.测量图标的大小
				      3.根据测量结果创建一个元素
				      4.将雪碧图设置为元素的背景图片
				      5.设置一个偏移量以显示正确的图片（不能忘记加-号）
				      
				      
				  雪碧图的特点：
				      一次性将多个图片加载进页面，降低请求的次数，加快访问速度
				      提升用户的体验
				    
				    注意：只适用于背景图片，不适用于img
				      * */
				     .box{
				     	width: 58px;
				     	height: 10px;
				     	background-image:url("img/amazon-sprite_.png");
				     	background-position:-160px -31px;
				     	
				     	
				     	
				     }
			
		</style>
	</head>
	<body>
		<div class="box"></div>
	    <a href=""></a>
		
	</body>
</html>
